"use client";

import { use, useMemo, useState } from "react";
import Link from "next/link";
import clsx from "clsx";
import { ExternalLink } from "lucide-react";
import { useApi } from "@/lib/api";
import { ago, eventColor, fmtDate, fmtDuration, fmtTime, truncate } from "@/lib/format";
import { Bar, Empty, Metric, Panel, Skeleton, StatusPill, Tag, Table } from "@/components/ui";
import { GainChart } from "@/components/charts";
import { LiveFeed } from "@/components/LiveFeed";
import { WorldGraph, type GraphEdge, type GraphNode } from "@/components/WorldGraph";
import { EntityTable, type EntityRow } from "@/components/EntityTable";

interface Session {
  session_id: string;
  platform: string;
  account_alias: string;
  mode: string | null;
  goal: string | null;
  started_at: string;
  ended_at: string | null;
  health: string;
  job: { budget?: Record<string, number>; query?: string; media_level?: number } | null;
  summary: { steps: number; entities: number; videos: number; network_responses: number; schemas: number; patterns_learned: number; ended_because: string; world: { nodes: number; edges: number; visited: number; multi_surface: number; by_type: Record<string, number> }; connector: { confidence: number; page_types: number; network_schemas: number } } | null;
  event_counts: { event_type: string; n: number }[];
}
interface Action {
  step: number;
  action_type: string;
  label: string;
  target_url: string | null;
  planner: string;
  expected_gain: number;
  novelty: number;
  relevance: number;
  reason: string;
  scores: { action_id: string; information_gain: number; penalties: string[] }[];
  before_state: { url: string; page_type: string; visible_entities: number } | null;
  after_state: { url: string; page_type: string; visible_entities: number; new_entities: number; network_responses: number; dom_nodes_added: number } | null;
  success: boolean;
  error: string | null;
  duration_ms: number;
  ts: string;
}
interface PageRow {
  step: number;
  ts: string;
  payload: { url: string; title: string; page_type: string; confidence: number; signals: string[]; entities: number; dom_entities: number; network_entities: number; both_surfaces: number; field_agreements: number; field_conflicts: { field: string; network: unknown; dom: unknown }[]; videos: number; summary: string };
}
interface Media {
  fingerprint: string;
  media_type: string;
  platform_media_id: string | null;
  title: string | null;
  author: string | null;
  duration_s: number | null;
  width: number | null;
  height: number | null;
  thumbnail_url: string | null;
  page_url: string | null;
  delivery: { kind: string; hostnames: string[]; manifest_url?: string } | null;
  frames: string[] | null;
}
interface Schema {
  shape_hash: string;
  fingerprint: { hostname: string; path_pattern: string; method: string; graphql_operation?: string };
  schema: { candidate_entity_types: { type: string; confidence: number; path: string }[]; fields: { path: string; semantic?: { kind: string; confidence: number }; example?: string }[]; object_count: number };
  observed_count: number;
  sample_url: string;
}

const TABS = ["decisions", "pages", "entities", "runtime apis", "media", "world model", "events"] as const;

export default function SessionConsole({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const [tab, setTab] = useState<(typeof TABS)[number]>("decisions");
  const s = useApi<Session>(`/sessions/${id}`, { refreshMs: 10_000 });
  const live = !s.data?.ended_at;
  const actions = useApi<Action[]>(`/sessions/${id}/actions`, { refreshMs: live ? 5000 : undefined });
  const pages = useApi<PageRow[]>(`/sessions/${id}/pages`, { refreshMs: live ? 5000 : undefined });
  const entities = useApi<EntityRow[]>(tab === "entities" ? `/sessions/${id}/entities?limit=500` : null, { refreshMs: live ? 8000 : undefined });
  const media = useApi<Media[]>(tab === "media" ? `/sessions/${id}/media` : null);
  const schemas = useApi<Schema[]>(tab === "runtime apis" ? `/sessions/${id}/schemas` : null);
  const world = useApi<{ nodes: GraphNode[]; edges: GraphEdge[] }>(tab === "world model" ? `/sessions/${id}/world` : null, { refreshMs: live ? 10_000 : undefined });
  const [selStep, setSelStep] = useState<number | null>(null);

  const gainSeries = useMemo(() => (actions.data ?? []).map((a) => ({ step: a.step, expected_gain: Number(a.expected_gain), novelty: Number(a.novelty), relevance: Number(a.relevance), action_type: a.action_type, new_entities: a.after_state?.new_entities })), [actions.data]);
  const sess = s.data;
  const sum = sess?.summary;
  const lastPage = pages.data?.[pages.data.length - 1];
  const selPage = selStep !== null ? pages.data?.find((p) => p.step === selStep) : lastPage;

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-start gap-3">
        <div className="min-w-0">
          <div className="flex items-center gap-2 text-xs text-dim mono">
            <Link href="/sessions" className="hover:text-cyan">sessions</Link> / {id}
          </div>
          <h1 className="text-xl font-semibold tracking-tight mt-1 truncate max-w-3xl">{sess?.goal ?? "…"}</h1>
          <div className="flex flex-wrap items-center gap-2 mt-2 text-xs">
            {sess && <StatusPill status={sess.ended_at ? (sess.health === "auth_required" ? "auth_required" : "done") : sess.health} />}
            {sess && <Tag>{sess.platform}</Tag>}
            {sess?.mode && <Tag color="#ffb347">{sess.mode}</Tag>}
            {sess?.job?.query && <Tag color="#9d7bff">“{sess.job.query}”</Tag>}
            {sess && <span className="text-dim">started {fmtDate(sess.started_at)} · {sess.ended_at ? `ended ${ago(sess.ended_at)}` : "running"}</span>}
            {sum && <span className="text-dim">· ended because <span className="text-fg-2">{sum.ended_because}</span></span>}
          </div>
        </div>
        <div className="ml-auto grid grid-cols-3 sm:grid-cols-6 gap-2 text-center">
          {[
            ["steps", actions.data?.length ?? sum?.steps],
            ["entities", sum?.entities ?? sess?.event_counts.filter((c) => /DISCOVERED/.test(c.event_type)).reduce((a, c) => a + c.n, 0)],
            ["videos", sum?.videos],
            ["responses", sum?.network_responses ?? sess?.event_counts.find((c) => c.event_type === "NETWORK_RESPONSE_OBSERVED")?.n],
            ["schemas", sum?.schemas ?? sess?.event_counts.find((c) => c.event_type === "NETWORK_SCHEMA_DISCOVERED")?.n],
            ["learned", sum?.patterns_learned ?? sess?.event_counts.find((c) => c.event_type === "CONNECTOR_PATTERN_LEARNED")?.n],
          ].map(([k, v]) => (
            <div key={k as string} className="panel px-3 py-2">
              <div className="mono text-lg text-cyan">{v ?? "—"}</div>
              <div className="text-[10px] uppercase tracking-widest text-dim">{k as string}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex gap-1 border-b border-line text-sm">
        {TABS.map((t) => (
          <button key={t} onClick={() => setTab(t)} className={clsx("px-3 py-2 -mb-px border-b-2 capitalize transition", tab === t ? "border-cyan text-cyan" : "border-transparent text-fg-2 hover:text-fg")}>
            {t}
          </button>
        ))}
      </div>

      {tab === "decisions" && (
        <div className="grid grid-cols-1 xl:grid-cols-3 gap-4">
          <div className="xl:col-span-2 space-y-4">
            <Panel title="Information gain per step" sub="what the agent expected of each move">
              {gainSeries.length ? <GainChart data={gainSeries} /> : <Empty>no decisions yet</Empty>}
            </Panel>
            <Panel title="Agent decisions" sub="why did the crawler do that? — click a step to see its page state" pad={false}>
              {actions.loading ? (
                <div className="p-4">
                  <Skeleton rows={6} />
                </div>
              ) : (
                <ul className="divide-y divide-line/60 max-h-[720px] overflow-auto scrollbar-thin">
                  {(actions.data ?? [])
                    .slice()
                    .reverse()
                    .map((a) => (
                      <li key={a.step} onClick={() => setSelStep(a.step)} className={clsx("px-4 py-2.5 cursor-pointer hover:bg-white/[0.03]", selStep === a.step && "bg-cyan/5")}>
                        <div className="flex items-center gap-2 text-sm">
                          <span className="mono text-dim w-8">#{a.step}</span>
                          <Tag color={a.success ? "#43e69a" : "#ff5c7a"}>{a.action_type.replace(/_/g, " ").toLowerCase()}</Tag>
                          <span className="truncate text-fg">{truncate(a.label.replace(/^Open \w+ E\d+: /, ""), 80)}</span>
                          <span className="ml-auto mono text-xs text-amber whitespace-nowrap">gain {Number(a.expected_gain).toFixed(3)}</span>
                        </div>
                        <div className="flex flex-wrap gap-x-4 text-[11px] text-dim mono mt-1 ml-10">
                          <span>nov {Number(a.novelty).toFixed(2)}</span>
                          <span>rel {Number(a.relevance).toFixed(2)}</span>
                          <span>{a.planner}</span>
                          {a.after_state && (
                            <span>
                              → {a.after_state.page_type} · +{a.after_state.new_entities} ent · {a.after_state.network_responses} resp · {a.duration_ms} ms
                            </span>
                          )}
                          {a.error && <span className="text-red">{truncate(a.error, 60)}</span>}
                        </div>
                        <div className="text-xs text-fg-2 mt-1 ml-10">{a.reason}</div>
                      </li>
                    ))}
                </ul>
              )}
            </Panel>
          </div>
          <div className="space-y-4">
            <Panel title={selStep !== null ? `Page state after step ${selStep}` : "Current page state"} sub="semantic DOM representation given to the planner">
              {selPage ? (
                <div className="space-y-2">
                  <div className="flex items-center gap-2 text-xs">
                    <Tag color="#38e1ff">{selPage.payload.page_type}</Tag>
                    <span className="mono text-dim">conf {Number(selPage.payload.confidence).toFixed(2)}</span>
                    <a href={selPage.payload.url} target="_blank" rel="noreferrer" className="ml-auto text-dim hover:text-cyan">
                      <ExternalLink className="h-3.5 w-3.5" />
                    </a>
                  </div>
                  <div className="text-[11px] text-dim break-all">{selPage.payload.url}</div>
                  <div className="grid grid-cols-4 gap-2 text-center text-[10.5px] mono">
                    {[
                      ["entities", selPage.payload.entities],
                      ["dom", selPage.payload.dom_entities],
                      ["network", selPage.payload.network_entities],
                      ["both", selPage.payload.both_surfaces],
                    ].map(([k, v]) => (
                      <div key={k as string} className="rounded bg-bg-2 py-1">
                        <div className="text-fg">{v as number}</div>
                        <div className="text-dim">{k as string}</div>
                      </div>
                    ))}
                  </div>
                  {selPage.payload.field_conflicts?.length > 0 && (
                    <div className="text-[11px] text-amber">
                      {selPage.payload.field_conflicts.length} field conflict(s): {selPage.payload.field_conflicts.map((c) => c.field).join(", ")}
                    </div>
                  )}
                  <pre className="mono text-[11px] leading-5 text-fg-2 whitespace-pre-wrap max-h-[520px] overflow-auto scrollbar-thin bg-bg-2 rounded p-3">{selPage.payload.summary}</pre>
                </div>
              ) : (
                <Empty>no page state yet</Empty>
              )}
            </Panel>
            <Panel title="Budget">
              {sess?.job?.budget ? (
                <div>
                  <Metric label="max minutes" value={sess.job.budget.max_minutes} />
                  <Metric label="max actions" value={sess.job.budget.max_actions} />
                  <Metric label="max profiles opened" value={sess.job.budget.max_profiles} />
                  <Metric label="max videos opened" value={sess.job.budget.max_videos} />
                  <Metric label="media level" value={sess.job.media_level ?? 1} />
                  <div className="mt-3 text-[10.5px] text-dim">steps used</div>
                  <Bar value={(actions.data?.length ?? 0) / Math.max(1, sess.job.budget.max_actions)} color="#ffb347" />
                </div>
              ) : (
                <Skeleton rows={3} />
              )}
            </Panel>
          </div>
        </div>
      )}

      {tab === "pages" && (
        <Panel title="Navigation path" sub="each page the browser reached, classified" pad={false}>
          <div className="p-4">
            {pages.data?.length ? (
              <Table head={["step", "time", "page type", "conf", "url", "entities (dom / net / both)", "agreements", "videos"]} dense>
                {pages.data.map((p) => (
                  <tr key={`${p.step}-${p.ts}`} onClick={() => setSelStep(p.step)} className="cursor-pointer">
                    <td className="mono">#{p.step}</td>
                    <td className="mono text-dim">{fmtTime(p.ts)}</td>
                    <td>
                      <Tag color="#38e1ff">{p.payload.page_type}</Tag>
                    </td>
                    <td className="mono">{Number(p.payload.confidence).toFixed(2)}</td>
                    <td className="max-w-[420px] truncate text-fg-2">
                      <a href={p.payload.url} target="_blank" rel="noreferrer" className="hover:text-cyan">
                        {truncate(p.payload.url, 80)}
                      </a>
                    </td>
                    <td className="mono">
                      {p.payload.entities} <span className="text-dim">({p.payload.dom_entities} / {p.payload.network_entities} / {p.payload.both_surfaces})</span>
                    </td>
                    <td className="mono">
                      {p.payload.field_agreements}
                      {p.payload.field_conflicts?.length ? <span className="text-amber"> / {p.payload.field_conflicts.length}✗</span> : ""}
                    </td>
                    <td className="mono">{p.payload.videos}</td>
                  </tr>
                ))}
              </Table>
            ) : (
              <Empty>no pages yet</Empty>
            )}
          </div>
        </Panel>
      )}

      {tab === "entities" && (
        <Panel title="Entities observed in this session" sub="every field keeps its provenance (network / dom) and confidence" pad={false}>
          <div className="p-4">{entities.loading ? <Skeleton rows={8} /> : entities.data?.length ? <EntityTable rows={entities.data} /> : <Empty>no entities yet</Empty>}</div>
        </Panel>
      )}

      {tab === "runtime apis" && (
        <Panel title="Runtime API discovery" sub="response shapes fingerprinted on this platform — no endpoint was hardcoded" pad={false}>
          <div className="p-4 space-y-3">
            {schemas.loading ? (
              <Skeleton rows={6} />
            ) : (
              (schemas.data ?? []).map((sc) => (
                <details key={sc.shape_hash} className="rounded-lg border border-line bg-bg-2/40 open:bg-bg-2/70">
                  <summary className="cursor-pointer px-3 py-2 flex flex-wrap items-center gap-2 text-sm">
                    <Tag color="#9d7bff">{sc.fingerprint.method}</Tag>
                    <span className="mono text-fg">
                      {sc.fingerprint.hostname}
                      <span className="text-fg-2">{sc.fingerprint.path_pattern}</span>
                    </span>
                    {sc.fingerprint.graphql_operation && <Tag color="#ff7ad9">{sc.fingerprint.graphql_operation}</Tag>}
                    <span className="ml-auto flex gap-1">
                      {sc.schema.candidate_entity_types.slice(0, 4).map((c) => (
                        <Tag key={c.type + c.path} color="#38e1ff">
                          {c.type} {Number(c.confidence).toFixed(2)}
                        </Tag>
                      ))}
                    </span>
                    <span className="mono text-xs text-dim">seen {sc.observed_count}× · {sc.schema.object_count} objects · #{sc.shape_hash.slice(0, 8)}</span>
                  </summary>
                  <div className="px-3 pb-3">
                    <div className="text-[11px] text-dim mono mb-2 break-all">sample: {sc.sample_url}</div>
                    <Table head={["field path", "inferred semantic", "conf", "example"]} dense>
                      {sc.schema.fields.slice(0, 60).map((f) => (
                        <tr key={f.path}>
                          <td className="mono text-[11px] text-fg-2 max-w-[520px] truncate">{f.path}</td>
                          <td>{f.semantic ? <Tag color="#43e69a">{f.semantic.kind}</Tag> : "—"}</td>
                          <td className="mono text-[11px]">{f.semantic ? Number(f.semantic.confidence).toFixed(2) : ""}</td>
                          <td className="mono text-[11px] text-dim max-w-[300px] truncate">{f.example}</td>
                        </tr>
                      ))}
                    </Table>
                  </div>
                </details>
              ))
            )}
          </div>
        </Panel>
      )}

      {tab === "media" && (
        <Panel title="Media" sub="videos detected on DOM, network and entity surfaces" pad={false}>
          <div className="p-4 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
            {media.loading ? (
              <Skeleton rows={6} />
            ) : media.data?.length ? (
              media.data.map((m) => (
                <div key={m.fingerprint} className="rounded-lg border border-line bg-bg-2/40 overflow-hidden">
                  {m.frames?.length ? (
                    <div className="grid grid-cols-5 gap-px bg-line">
                      {m.frames.map((f) => (
                        // eslint-disable-next-line @next/next/no-img-element
                        <img key={f} src={`/media/${f.split("/media/")[1] ?? ""}`} alt="" className="aspect-video object-cover w-full" />
                      ))}
                    </div>
                  ) : m.thumbnail_url ? (
                    // eslint-disable-next-line @next/next/no-img-element
                    <img src={m.thumbnail_url} alt="" className="aspect-video object-cover w-full" />
                  ) : (
                    <div className="aspect-video grid place-items-center text-dim text-xs">no frame</div>
                  )}
                  <div className="p-3 space-y-1">
                    <div className="text-sm truncate">{m.title ?? m.platform_media_id}</div>
                    <div className="text-[11px] text-dim mono flex flex-wrap gap-x-3">
                      <span>{m.author ?? ""}</span>
                      <span>{fmtDuration(m.duration_s)}</span>
                      {m.width ? <span>{m.width}×{m.height}</span> : null}
                      {m.delivery?.kind && <span>{m.delivery.kind}</span>}
                      {m.delivery?.hostnames?.length ? <span>{m.delivery.hostnames.slice(0, 2).join(", ")}</span> : null}
                    </div>
                    <Link href={`/entities/${encodeURIComponent(m.fingerprint)}`} className="text-[11px] text-cyan">evidence →</Link>
                  </div>
                </div>
              ))
            ) : (
              <Empty>no media yet</Empty>
            )}
          </div>
        </Panel>
      )}

      {tab === "world model" && (
        <Panel title="Social world model" sub="graph of entities and relationships discovered in this session — orange ring = visited by the crawler" pad={false}>
          <div className="p-2">{world.data ? <WorldGraph nodes={world.data.nodes} edges={world.data.edges} height={620} /> : <Skeleton rows={8} />}</div>
        </Panel>
      )}

      {tab === "events" && (
        <div className="grid grid-cols-1 xl:grid-cols-4 gap-4">
          <Panel title="Event mix">
            <ul className="space-y-1 text-xs mono">
              {(sess?.event_counts ?? [])
                .slice()
                .sort((a, b) => b.n - a.n)
                .map((c) => (
                  <li key={c.event_type} className="flex justify-between gap-2">
                    <Tag color={eventColor(c.event_type)}>{c.event_type.toLowerCase()}</Tag>
                    <span>{c.n}</span>
                  </li>
                ))}
            </ul>
          </Panel>
          <Panel title="Raw observation stream" sub={live ? "live" : "session ended — showing the tail"} className="xl:col-span-3" pad={false}>
            <div className="p-2">{live ? <LiveFeed session={id} max={200} height={640} /> : <EventsTail id={id} />}</div>
          </Panel>
        </div>
      )}
    </div>
  );
}

function EventsTail({ id }: { id: string }) {
  const { data } = useApi<{ event_id: string; event_type: string; step: number; ts: string; payload: Record<string, unknown> }[]>(`/sessions/${id}/events?limit=400`);
  if (!data) return <Skeleton rows={8} />;
  return (
    <ul className="mono text-[11.5px] space-y-0.5 max-h-[640px] overflow-auto scrollbar-thin">
      {data.map((e) => (
        <li key={e.event_id} className="flex gap-2 leading-5 px-1">
          <span className="text-dim">{fmtTime(e.ts)}</span>
          <span className="text-dim w-7 text-right">#{e.step ?? 0}</span>
          <Tag color={eventColor(e.event_type)}>{e.event_type.replace(/_/g, " ").toLowerCase()}</Tag>
          <span className="text-fg-2 truncate">{truncate(JSON.stringify(e.payload), 160)}</span>
        </li>
      ))}
    </ul>
  );
}